// base color

// $blue: #324157;
// $menuBg: #304156;
// $menuHover: #263445;
// $subMenuBg: #1f2d3d;
// $subMenuHover: #001528;

$color-background-s: rgba(0, 0, 0, 0.9);

$blue: #00417a;
$commonBlue: #0000ff;
// $menuBg: #00417a;
$menuBg: #ffffff;
// $menuHover: #00355e;
$menuHover: #f4f4f4;
// $subMenuBg: #003462;
$subMenuBg: #ffffff;
// $subMenuHover: #002546;
$subMenuHover: #e7e7e7;
$menuBorderRight: 1px solid #c5c1c1;

$light-blue: #1890ff;
$red: #f56c6c;
$deep-red: #ff0000;
$blood-red: #d50000;
$pink: #dc67ce;
$green: #0bbd87;
$tiffany: #4ab7bd;
$yellow: #e6a23c;
$deep-yellow: #d69737;
$panGreen: #30b08f;
$purple: #6771dc;
$grey: #585858;
$light-grey: #f0f0f0;
$orange: #ff8037;
$deep-green: #07885f;
$light-green: #0bbd8722;
$light-purple: #6771dc22;
// sidebar
// $menuText: #bfcbd9;
$menuText: #002546;
// $menuActiveText: #409eff;
$menuActiveText: #08ac76;
// $subMenuActiveText: #f4f4f5;
$subMenuActiveText: #00417a;

$sideBarWidth: 230px;
$headerHeight: 54px;

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
	blue: $blue;
	commonBlue: $commonBlue;
	lightBlue: $light-blue;
	red: $red;
	deepRed: $deep-red;
	bloodRed: $blood-red;
	pink: $pink;
	green: $green;
	deepGreen: $deep-green;
	lightGreen: $light-green;
	lightPurple: $light-purple;
	tiffany: $tiffany;
	yellow: $yellow;
	deepYellow: $deep-yellow;
	orange: $orange;
	panGreen: $panGreen;
	purple: $purple;
	grey: $grey;
	lightGrey: $light-grey;
	menuText: $menuText;
	menuActiveText: $menuActiveText;
	subMenuActiveText: $subMenuActiveText;
	menuBg: $menuBg;
	menuHover: $menuHover;
	subMenuBg: $subMenuBg;
	subMenuHover: $subMenuHover;
	sideBarWidth: $sideBarWidth;
}
